<!--
 * @Author: GKN
 * @Date: 2023-08-21 17:14:24
 * @LastEditTime: 2023-09-11 11:59:36
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\mainAc\list1.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div style="height: 492px;">
        <img src="https://p3.img.cctvpic.com/photoworkspace/2023/09/09/2023090917031435351.png" alt="" class="ad-img">
    </div>
    <center-view>
        <template v-slot:view>
            <el-row :gutter="20" style="padding-top: 40px;">
                <el-col :span="8">
                    <div class="shadow-1 border-r6 p-l p-r p-t-30 p-b-30" style="background: linear-gradient(to bottom,#fff9f6,#ffe3d0)">
                        <TitleView title="热门排行"></TitleView>
                        <div style="height: 609px;">
                            <el-carousel @change="carouselChange" width="100%" height="600px" direction="horizontal" indicator-position="none" :interval="3500">
                                <el-carousel-item v-for="item in rdzt_list" :key="item">
                                    <div v-for="(items,is) in item" :key="is" class="fleex" @click="goInfo(items)">
                                        <el-row :gutter="20" class="MarT">
                                            <el-col :span="12" >
                                                <div class="ad-view po-re" style="height:100px">
                                                    <div class="index po-ab-10">{{ is+1 }}</div>
                                                    <imgView :src="items.icon" size="50" />
                                                </div>
                                            </el-col>
                                            <el-col :span="12" >
                                                <div class="flex-d flex-j-s" style="height: 100px;padding: 10px 0;">
                                                    <div>
                                                        <div class="font-title omit" style="text-align: left;">{{ items.name }}</div>
                                                        <div class="f-desc-14 omit-2"></div>
                                                    </div>
                                                    <div class="f-desc-14">{{items.num}}人参加</div>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                    
                </el-col>
                <el-col :span="8">
                    <div class="shadow-1 border-r6 p-l p-r p-t-30 p-b-30" style="background: linear-gradient(to bottom,#fff9f6,#ffe3d0)">
                        <TitleView title="新课排行"></TitleView>
                        <div style="height: 609px;">
                            <el-carousel @change="carouselChange" width="100%" height="600px" direction="horizontal" indicator-position="none" :interval="3500">
                                <el-carousel-item v-for="item in xk_list" :key="item">
                                    <div v-for="(items,is) in item" :key="is" class="fleex" @click="goInfo(item)">
                                        <el-row :gutter="20" class="MarT">
                                            <el-col :span="12" >
                                                <div class="ad-view po-re" style="height:100px">
                                                    <div class="index po-ab-10">{{ is+1 }}</div>
                                                    <imgView :src="items.icon" size="50" />
                                                </div>
                                            </el-col>
                                            <el-col :span="12" >
                                                <div class="flex-d flex-j-s" style="height: 100px;padding: 10px 0;">
                                                    <div>
                                                        <div class="font-title omit" style="text-align: left;">{{ items.name }}</div>
                                                        <div class="f-desc-14 omit-2"></div>
                                                    </div>
                                                    <div class="f-desc-14">{{items.num}}人参加</div>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                    
                </el-col>
                <el-col :span="8">
                    <div class="shadow-1 border-r6 p-l p-r p-t-30 p-b-30" style="background: linear-gradient(to bottom,#fff9f6,#ffe3d0)">
                        <TitleView title="五星评价"></TitleView>
                        <div style="height: 609px;">
                            <el-carousel @change="carouselChange" width="100%" height="600px" direction="horizontal" indicator-position="none" :interval="3500">
                                <el-carousel-item v-for="item in wx_list" :key="item">
                                    <div v-for="(items,is) in item" :key="is" class="fleex" @click="goInfo(item)">
                                        <el-row :gutter="20" class="MarT">
                                            <el-col :span="12" >
                                                <div class="ad-view po-re" style="height:100px">
                                                    <div class="index po-ab-10">{{ is+1 }}</div>
                                                    <imgView :src="items.icon" size="50" />
                                                </div>
                                            </el-col>
                                            <el-col :span="12" >
                                                <div class="flex-d flex-j-s" style="height: 100px;padding: 10px 0;">
                                                    <div>
                                                        <div class="font-title omit" style="text-align: left;">{{ items.name }}</div>
                                                        <div class="f-desc-14 omit-2"></div>
                                                    </div>
                                                    <div class="f-desc-14">{{items.num}}人参加</div>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                    
                </el-col>
            </el-row>
            <div class="MarT35">
                <div class="itemv MarB" v-for="item in list4" :key="item" @click="goInfo(item)">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="ad-view" style="height: 224px;">
                                <imgView :src="item.icon" />
                            </div>
                        </el-col>
                        <el-col :span="16" >
                            <div class="flex-d flex-j-s" style="height: 224px;padding:10px 0;">
                                <div>
                                    <div class="f-title-26 omit-2">{{ item.name }}</div>
                                    <div class="f-desc-14 MarT omit-3"></div>
                                </div>
                                <div class="f-desc-14" style="text-align: right;">{{ item.num }}人参加</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </template>
    </center-view>
  </template>
  
<script setup>
import CryptoJS from 'crypto-js';
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
import centerView from '../components/centerView.vue';
import TitleView from '../components/title.vue';
import FrameView from '../components/frame.vue';
import Card1 from '../components/card1.vue';
    // 热点
    const rdzt_list = ref([])
    // 新课
    const xk_list = ref([])
    // 伍星
    const wx_list = ref([])
    const newlist1=()=>{
        proxy.$http.request(proxy.$api.course+'?nextTag=0&pageSize=5&prevTag=0&sty=1','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    rdzt_list.value = proxy.$comJs.carveUp(res.data.data.list,5)
                } 
            }
        })
        proxy.$http.request(proxy.$api.course+'?nextTag=0&pageSize=5&prevTag=0&sty=2','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    xk_list.value = proxy.$comJs.carveUp(res.data.data.list,5)
                } 
            }
        })
        proxy.$http.request(proxy.$api.course+'?nextTag=0&pageSize=5&prevTag=0&sty=3','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    wx_list.value = proxy.$comJs.carveUp(res.data.data.list,5)
                } 
            }
        })
    }
    newlist1()
    
    
    // 精品课程列表
    const list4 = ref(null)
  const get_jpkc_list=()=>{
    proxy.$http.request(proxy.$api.course+'?nextTag=0&pageSize=20&prevTag=0','get',{},false, function (res) {
      if(res&&res.data){
        if(res.data.data.list!= undefined){
            list4.value = res.data.data.list
        } 
      }
    })
  }
  get_jpkc_list()
    const goInfo=(item)=>{
        Router.push({
            path:'/mainAc/jpinfo',
            query:{
                ob:proxy.$comJs.encry(item.cid)
            }
        });
    }
  </script>
  
  <style lang='less' scoped>
  .index{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #d10b00;
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 26px;
    font-weight: bold;
  }
  </style>
  
  